<template>
	<div :class="classNames">
		<template v-if="items.length > 0">
			<div class="app-control-dataview-content">
				<template v-for="(item, index) in items" :key="index">
					<DataViewItem
						:style="{
							width: cardOpts.width > 0 ? `${cardOpts.width}px` : false,
							height: cardOpts.height > 0 ? `${cardOpts.height}px` : false,
						}"
						:item="item"
						:class="getListItemClassNames(item)"
						@click="handleClick(item, $event)"
						@dblclick="handleDbClick(item, $event)"
					>
						<span v-if="!hasSlot('default')" class="data-view-item__title">{{
							item.srfmajortext
						}}</span>
						<template v-if="hasSlot('default')" #default>
							<slot name="default" :item="item"></slot>
						</template>
						<template #dataViewItemTitle>
							<slot
								v-if="hasSlot('dataViewItemTitle')"
								name="dataViewItemTitle"
							></slot>
						</template>
						<template #dataViewItemActions>
							<slot
								v-if="hasSlot('dataViewItemActions')"
								name="dataViewItemActions"
							></slot>
							<div v-else class="app-data-item-actions">
								<template
									v-for="(action, index1) in item.uIActionGroup"
									:key="index1"
								>
									<AppButton
										type="link"
										v-show="action.visible"
										:disabled="action.disabled"
										@click.stop="(event: MouseEvent)=> handleActionClick(event, action, item)"
									>
										<AppIconText
											:iconClass="action.showIcon && action.iconClass"
											:imgPath="action.showIcon && action.imgPath"
											:text="action.showCaption && action.caption"
										/>
									</AppButton>
								</template>
							</div>
						</template>
						<template #dataViewItemCover>
							<slot
								v-if="hasSlot('dataViewItemCover')"
								name="dataViewItemCover"
							></slot>
						</template>
						<template #dataViewItemCustomTab>
							<slot
								v-if="hasSlot('dataViewItemCustomTab')"
								name="dataViewItemCustomTab"
							></slot>
						</template>
						<template #dataViewItemExtra>
							<slot
								v-if="hasSlot('dataViewItemExtra')"
								name="dataViewItemExtra"
							></slot>
						</template>
						<template #dataViewItemTabBarExtraContent>
							<slot
								v-if="hasSlot('dataViewItemTabBarExtraContent')"
								name="dataViewItemTabBarExtraContent"
							></slot>
						</template>
					</DataViewItem>
				</template>
			</div>
			<template
				v-if="loadMore && items.length > 0 && items.length < totalRecord"
			>
				<div class="load-more">
					<AppButton type="link" @click.stop="handleLoadMore"
						>加载更多</AppButton
					>
				</div>
			</template>
		</template>
		<template v-else>
			<AppEmptyDataTip
				:emptyText="$t(emptyTextPSLanguageRes, emptyText)"
			></AppEmptyDataTip>
		</template>
	</div>
</template>
<script setup lang="ts">
import { DataViewProps, IDataViewItem } from './data-view';
import DataViewItem from './components/data-view-item.vue';
import AppEmptyDataTip from '@/components/common/empty-data-tip/src/empty-data-tip.vue';
import { IParam } from '@/core';
const props = defineProps(DataViewProps);

const emit = defineEmits<{
	(name: 'selectionChange', selections: IParam[]): void;
	(name: 'itemClick', item: IDataViewItem, event: MouseEvent): void;
	(name: 'itemDbClick', item: IDataViewItem, event: MouseEvent): void;
	(
		name: 'itemActionClick',
		logic: IParam,
		data: IParam,
		event: MouseEvent
	): void;
	(name: 'loadMore'): void;
}>();

const classNames = computed(() => {
	return {
		'app-control-dataview__empty': props.items.length === 0,
		'app-control-list__pagination': props.loadMore,
	};
});

//  获取显示文本
const getLocale = computed(() => {
	return {
		emptyText: props.emptyText || '暂无数据',
	};
});

const getSelected = (item: IDataViewItem): boolean => {
	return (
		props.selections.findIndex((s: IParam) => s.srfkey === item.srfkey) !== -1
	);
};

//  获取卡片视图部件项类名
const getListItemClassNames = (item: IDataViewItem) => {
	return {
		'app-dataview-item': true,
		'app-dataview-item--selected': getSelected(item),
	};
};

//  是否有该插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};

const handleClick = (item: IDataViewItem, event: MouseEvent) => {
	//  其他行抛出点击事件
	emit('itemClick', item, event);
};

const handleDbClick = (item: IDataViewItem, event: MouseEvent) => {
	emit('itemDbClick', item, event);
};

const handleLoadMore = (e: MouseEvent) => {
	emit('loadMore');
};

const handleActionClick = (event: MouseEvent, logic: IParam, data: IParam) => {
	event.stopPropagation();
	event.preventDefault();
	emit('itemActionClick', logic, data, event);
};
</script>
